﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 角色管理</title>
    @Styles.Render("~/Content/easyui")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/easyui")
    @Scripts.Render("~/bundles/easyuivalidate")
    <script language="javascript">
        $(function () {
            var p = $('#dg').datagrid('getPager');

            $(p).pagination({

                pageSize: 10,//每页显示的记录条数，默认为10

                pageList: [10, 20, 30],//可以设置每页记录条数的列表

                beforePageText: '第',//页数文本框前显示的汉字

                afterPageText: '页    共 {pages} 页',

                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',

                /*onBeforeRefresh:function(){

                    $(this).pagination('loading');

                    alert('before refresh');

                    $(this).pagination('loaded');

                }*/

            });
        });

        function convert(rows) {
            function exists(rows, parentId) {
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i].id == parentId) return true;
                }
                return false;
            }

            var nodes = [];
            // get the top level nodes
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                if (!exists(rows, row.parentId)) {
                    nodes.push({
                        id: row.id,
                        text: row.name
                    });
                }
            }

            var toDo = [];
            for (var i = 0; i < nodes.length; i++) {
                toDo.push(nodes[i]);
            }
            while (toDo.length) {
                var node = toDo.shift();	// the parent node
                // get the children nodes
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (row.parentId == node.id) {
                        var child = { id: row.id, text: row.name };
                        if (node.children) {
                            node.children.push(child);
                        } else {
                            node.children = [child];
                        }
                        toDo.push(child);
                    }
                }
            }
            return nodes;
        }
        $(function () {
            $('#org_tree').tree({
                url: '/Account/orgTree?time='+new Date(),
                loadFilter: function (rows) {
                    return convert(rows);
                },
                onClick: function (node) {
                    $("#lselect").empty();
                    $.getJSON("/Account/UserListForRoleManage?orgid=" + node.id+"&time=" + new Date(), function (data) {
                        $.each(data.rows, function (i, item) {
                            $('#lselect').append($("<option/>", {
                                value: item.ID,
                                text: item.TrueName
                            }));
                        });
                    });
                },
                onLoadSuccess: function () {
                    var t = $(this);
                    t.tree("collapseAll");
                }
            });
        });

        $(function () {
            $('#menutree').tree({
                url: '/Account/menuTree',
                checkbox: true,
                cascadeCheck: false,
                loadFilter: function (rows) {
                    return convert(rows);
                },
                onLoadSuccess: function (node, data) {
                    
       

                },
                onClick: function (node) {
               
              
                }, onCheck: function (node, checked) {
                    if (checked) {
                        var parentNode = $("#menutree").tree('getParent', node.target);
                        if (parentNode != null) {
                            $("#menutree").tree('check', parentNode.target);
                        }
                    } else {
                        var childNode = $("#menutree").tree('getChildren', node.target);
                        if (childNode.length > 0) {
                            for (var i = 0; i < childNode.length; i++) {
                                $("#menutree").tree('uncheck', childNode[i].target);
                            }
                        }
                    }
                }
            });
        });



   </script>

</head>

<body>
    <div id="p" class="easyui-panel" title="角色管理"
         style="padding:10px;background:#fafafa;"
         data-options="iconCls:'icon-save',closable:true,
                collapsible:true,minimizable:true,maximizable:true">

        <table id="dg" title="角色管理" class="easyui-datagrid" fitcolumns="true"
               url="/Account/RoleList"
               toolbar="#toolbar" pagination="true"
               rownumbers="true" fitcolumns="true" singleselect="true">
            <thead>
                <tr>
                    <th data-options="field:'Name'" width="100">角色名称</th>
                    <th data-options="field:'Description'" width="100">角色描述</th>
                </tr>
            </thead>
        </table>
        <div id="toolbar">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newRole()" id="badd">新增</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editRole()" disabled="true" id="bedit">编辑</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyRole()" disabled="true" id="bdel">删除</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="ManagerRole()" disabled="true" id="bmg">成员管理</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="MenuToRole()" disabled="true" id="bmtr">角色菜单管理</a>
        </div>
        <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
             closed="true" buttons="#dlg-buttons" modal="true">
            <div class="ftitle">角色信息</div>
            <form id="fm" method="post" novalidate>
                <div class="fitem">
                    <label>角色名称:</label>
                    <input name="Name" class="easyui-textbox" required="true" style="width:200px;">
                </div>
                <div class="fitem">
                    <label>角色描述:</label>
                    <input name="Description" class="easyui-textbox" style="width:200px;">
                </div>
            </form>
        </div>
        <div id="dlg-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="saveRole()" style="width:90px">Save</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
        </div>


        <div id="dlgmtr" class="easyui-dialog" style="width:320px;height:380px;padding:10px 20px"
             closed="true" buttons="#dlg-buttons-mtr" modal="true">

            <ul id="menutree" data-options="animate:true,lines:true" style="margin-top:10px;margin-left:10px;"></ul>
            


        </div>
        <div id="dlg-buttons-mtr">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="MenuSaveToRole()" style="width:90px">Save</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#dlgmtr').dialog('close')" style="width:90px">Cancel</a>
        </div>

        <div id="dlgrole" class="easyui-dialog" closed="true" buttons="#dlgrole-buttons" modal="true" style="padding:15px 15px">
            <div class="easyui-layout" style="width:680px;height:460px;padding:0px 0px;border:0px">
                <div data-options="region:'west'" style="width: 500px; padding: 0px; border: 0px">
                    <div class="easyui-layout" style="width: 460px; height: 460px; border: 0px">
                        <div class="easyui-panel" title="组织机构" data-options="region:'west',split:true" style="width:200px;padding:0px;"><ul id="org_tree" data-options="animate:true,lines:true" style="margin-top:10px;margin-left:10px;"></ul></div>
                        <div class="easyui-panel" title="待选用户" data-options="region:'center'" style="width: 200px; height: 460px; padding: 6px;">
                            <select id="lselect" multiple="multiple" name="state" style="width: 185px; height: 410px; border-color: #95B8E7"></select>
                        </div>
                        <div data-options="region:'east',border:false" style="width: 60px; padding: 6px; margin: 0px;text-align:bottom; ">
                            <br /><br /><br /><br /><br /><br /><br /><br /><br />
                            <a href="javascript:void(0)" id="selto" class="easyui-linkbutton" data-options="iconCls:'icon-large-user',size:'large',iconAlign:'top'">选择</a>
                            <br /><br />
                            <a href="javascript:void(0)" id="allsel" class="easyui-linkbutton" data-options="iconCls:'icon-large-users',size:'large',iconAlign:'top'">全选</a>
                            <br /><br />
                            <a href="javascript:void(0)" id="del" class="easyui-linkbutton" data-options="iconCls:'icon-large-cancel',size:'large',iconAlign:'top'">删除</a>
                        </div>
                    </div>
                </div>
                <div data-options="region:'east'" style="width: 220px;height:460px; padding: 0px; border: 0px" data-options="border:false">
                    <div class="easyui-panel" title="已选用户" data-options="region:'east'" style="width:200px;height:460px;padding:6px;">
                        <select id="rselect" multiple="multiple" name="state1" style="width: 185px; height: 410px; border-color: #95B8E7"></select>

                    </div>
                </div>

            </div>
        </div>
        <div id="dlgrole-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="UserToRole()" style="width:90px">Save</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlgrole').dialog('close')" style="width:90px">Cancel</a>
        </div>
        <script type="text/javascript">
            var url;
            var havevalue;
            var roleid;
            $(function(){
                //点击按钮移到右边
                $('#selto').click(function() {
     
                    $("#lselect option:selected").each(function () {
                        havevalue = 0;
                        val = $(this).val();
                        $("#rselect option").each(function () {
                            if ($(this).val() == val) {
                                havevalue = 1;
                                return;
                            }
                        });
                        if (havevalue == 0) {

                            $(this).clone().appendTo('#rselect'); //追加给对方
                        }
                    });
                });
                //移到左边

                //点击按钮全部移到右边
                $('#allsel').click(function () {
                    $("#lselect option").each(function () {
                        havevalue = 0;
                        val = $(this).val();
                        $("#rselect option").each(function () {
                            if ($(this).val() == val) {
                                havevalue = 1;
                                return;
                            }
                        });
                        if (havevalue == 0) {

                            $(this).clone().appendTo('#rselect'); //追加给对方
                        }
                    });

                    //获取全部的选项,删除并追加给对方
                });
      
                //双击移到右边选项
                $('#lselect').dblclick(function(){ //绑定双击事件
                    //获取全部的选项,删除并追加给对方
                    havevalue = 0;
                    val = $("option:selected", this).val();
                    $("#rselect option").each(function () {
                        if ($(this).val() == val) {
                            havevalue = 1;
                            return;
                        }
                    });
                    if (havevalue == 0) {

                        $("option:selected", this).clone().appendTo('#rselect'); //追加给对方
                    }

                });

                //双击右边自身删除
                $('#rselect').dblclick(function () { //绑定双击事件
                    //获取全部的选项,删除并追加给对方
                    $("option:selected", this).remove(); //追加给对方
                });

                $('#del').click(function () { //绑定双击事件
  
                    $("#rselect option:selected").remove(); 
                });

            });




            function newRole() {
                $('#dlg').dialog('open').dialog('setTitle', '添加角色');
                $('#fm').form('clear');
                url = '/Account/CreateRole/';
            }
            function editRole() {
                var node = $('#dg').datagrid('getSelected');
                if (node) {
                    $('#dlg').dialog('open').dialog('setTitle', '编辑角色');
                    $('#fm').form('load', node);
                    url = '/Account/EditRole/?id=' + node.ID;
                }
            }
            function ManagerRole() {
                var node = $('#dg').datagrid('getSelected');
                roleid = node.ID;
                $('#dlgrole').dialog('open').dialog('setTitle', '设置角色成员');
                //设置待选人员列表
                $("#lselect").empty();
                $("#rselect").empty();
                $.getJSON("/Account/UserListForRoleManage?time=" + new Date(), function (data) {
                    $.each(data.rows, function (i, item) {
                        $('#lselect').append($("<option/>", {
                            value: item.ID,
                            text: item.TrueName
                        }));
                    });
                });

                $.getJSON("/Account/RoleUserList/?roleid="+node.ID+"&time="+new Date(), function (data) {
                    $.each(data.rows, function (i, item) {
                        $('#rselect').append($("<option/>", {
                            value: item.ID,
                            text: item.TrueName
                        }));
                    });
                });
                //设置待选人员列表结束
            }
            function saveRole() {

                $('#fm').form('submit', {
                    url: url,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        var result = eval('(' + result + ')');
                        if (result.errorMsg) {
                            $.messager.show({
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        } else {
                            $('#dlg').dialog('close');		// close the dialog
                            $('#dg').datagrid('reload');	// reload the user data
                            $.messager.show({
                                title: '角色创建提示信息',
                                msg: result.okMsg
                            });
                        }
                    }
                });
            }
            function UserToRole() {
                var select_values = [];
                $("#rselect option").each(function () {
                    select_values.push($(this).val())

                });
                $.post('/Account/UsersToRole ', { user_ids: select_values.join(), roleid: roleid }, function (result) {
                    if (result.okMsg) {
                        $.messager.show({	// show error message
                            title: '角色成员设置成功',
                            msg: result.okMsg
                        });
                        // reload the user data
                    } else {
                        $.messager.show({	// show error message
                            title: '角色成员设置失败',
                            msg: result.errorMsg
                        });
                    }

                }, 'json');
            }

            function MenuToRole() {
                var node = $('#dg').datagrid('getSelected');
                roleid = node.ID;
                $('#dlgmtr').dialog('open').dialog('setTitle', '设置角色菜单权限');

                var roots = $('#menutree').tree('getRoots');        //清空选择列表
                for (var i = 0; i < roots.length; i++) {
                    var nodet = $('#menutree').tree('find', roots[i].id);
                    $('#menutree').tree('uncheck', nodet.target);
                 }

                $.getJSON("/Account/MenuToRoleList?roleid=" + roleid , function (data) {          //设置选登菜单
                    $.each(data.rows, function (i, item) {
                       
                        var nodetree = $('#menutree').tree('find', item.ID);
                        $('#menutree').tree('check', nodetree.target);
                     
                    });
                });
            }
            function MenuSaveToRole() {
         
                    var nodes = $('#menutree').tree('getChecked');
                    var select_values = '';
                    for (var i = 0; i < nodes.length; i++) {
                        if (select_values != '') select_values += ',';
                        select_values += nodes[i].id;
                    }
 
                $.post('/Account/MenusToRole ', { menu_ids: select_values, roleid: roleid }, function (result) {
                    if (result.okMsg) {
                        $.messager.show({	// show error message
                            title: '角色成员设置成功',
                            msg: result.okMsg
                        });
                        // reload the user data
                    } else {
                        $.messager.show({	// show error message
                            title: '角色成员设置失败',
                            msg: result.errorMsg
                        });
                    }

                }, 'json');

            }
            
            function destroyRole() {
                var node = $('#dg').datagrid('getSelected');
                if (node) {
                    $.messager.confirm('Confirm', '确定要删除这个角色吗?', function (r) {
                        if (r) {
                            $.post('/Account/DelRole ', { id: node.ID }, function (result) {
                                if (result.okMsg) {
                                    $('#dg').datagrid('reload');
                                    $.messager.show({	// show error message
                                        title: '删除成功',
                                        msg: result.okMsg
                                    });
                                    // reload the user data
                                } else {
                                    $.messager.show({	// show error message
                                        title: '删除失败',
                                        msg: result.errorMsg
                                    });
                                }

                            }, 'json');
                        }
                    });
                }
            }
            $('#dg').datagrid({
                onClickRow: function (node) {
                    $('#bedit').linkbutton("enable");
                    $('#bdel').linkbutton("enable");
                    $('#bmg').linkbutton("enable");
                    $('#bmtr').linkbutton("enable");
                }
            });
        </script>
        <style type="text/css">
            #fm {
                margin: 0;
                padding: 10px 30px;
            }

            .ftitle {
                font-size: 14px;
                font-weight: bold;
                padding: 5px 0;
                margin-bottom: 10px;
                border-bottom: 1px solid #ccc;
            }

            .fitem {
                margin-bottom: 5px;
            }

                .fitem label {
                    display: inline-block;
                    width: 80px;
                }

                .fitem input {
                    width: 160px;
                }
        </style>

    </div>

</body>
</html>
